<template>
  <div class="recommend h-full">
    <template>
      <el-carousel type="card" height="200px">
        <el-carousel-item
          class="overflow-hidden"
          v-for="(item, index) in banner"
          :key="index"
        >
          <el-image
            :src="item.imageUrl"
            class="rounded-md"
            fit="fill"
          ></el-image>
          <span
            class="tally absolute bottom-1 right-0 rounded-br-lg rounded-tl-lg text-xs block w-16 h-5 text-white text-center leading-5"
          >
            {{ item.typeTitle }}
          </span>
        </el-carousel-item>
      </el-carousel>
    </template>

    <el-container>
      <el-header height="30px">
        <router-link to="">
          <h3>推荐歌单</h3>
          <i class="el-icon-arrow-right"></i>
        </router-link>
      </el-header>
      <el-main class="grid grid-flow-col grid-cols-3 grid-rows-2 gap-4">
        <router-link
          class="relative block"
          :to="{
            name: 'particulars',
            params: { id: item.id, name: 'playlist' },
          }"
          v-for="(item, index) in RecommendThePlaylist"
          :key="index"
          :title="item.id"
        >
          <el-image
            class="RecommendThePlaylist rounded-lg shadow-lg"
            :src="item.picUrl"
          >
          </el-image>
          <span class="text-white text-xs absolute top-0 right-2">
            <i class="el-icon-caret-right"> </i>
            {{ parseInt(item.playCount / 10000) }}万
          </span>
          <div class="transmit bottom-11 right-3">
            <i class="el-icon-caret-right"></i>
          </div>
          <p class="text-xs text-left block w-5/6 translate-x-2/7">
            {{ item.name }}
          </p>
        </router-link>
      </el-main>
    </el-container>

    <el-container class="h-auto">
      <el-header height="30px">
        <router-link to="">
          <h3>独家放送</h3>
          <i class="el-icon-arrow-right"></i>
        </router-link>
      </el-header>
      <el-main class="grid grid-flow-col grid-cols-3 grid-rows-1 gap-4">
        <router-link
          class="relative block"
          to=""
          v-for="(item, index) in privatecontent"
          :key="index"
        >
          <el-image
            class="h-48 w-auto rounded-lg"
            :src="item.picUrl"
          ></el-image>
          <div class="transmit top-1 left-1" style="display: block">
            <i class="el-icon-caret-right"></i>
          </div>
          <p class="text-xs text-left">{{ item.name }}</p>
        </router-link>
      </el-main>
    </el-container>

    <el-container class="h-auto">
      <el-header height="30px">
        <router-link to="">
          <h3>最新音乐</h3>
          <i class="el-icon-arrow-right"></i>
        </router-link>
      </el-header>
      <el-main class="grid grid-flow-col grid-cols-3 grid-rows-4 gap-4">
        <router-link
          class="relative block flex newsong rounded"
          to=""
          v-for="(item, index) in newsong"
          :key="index"
        >
          <el-image class="h-fit w-16 rounded" :src="item.picUrl"></el-image>
          <div class="transmit top-4 left-4" style="display: block">
            <i class="el-icon-caret-right"></i>
          </div>
          <div>
            <p class="text-sm text-left m-1">{{ item.name }}</p>
            <p class="singer">
              <span
                class="mv text-xs border border-red-600 text-red-500 rounded mx-1 px-1"
                v-if="item.song.mvid"
                >MV</span
              >
              <span
                class="text-xs text-left ml-1"
                v-for="(items, indexs) in item.song.artists"
                :key="items.id"
              >
                {{ items.name }}
                <span v-if="indexs !== item.song.artists.length - 1">/</span>
              </span>
            </p>
          </div>
        </router-link>
      </el-main>
    </el-container>

    <el-container class="h-auto">
      <el-header height="30px">
        <router-link to="">
          <h3>推荐MV</h3>
          <i class="el-icon-arrow-right"></i>
        </router-link>
      </el-header>
      <el-main class="grid grid-flow-col grid-cols-4 grid-rows-1 gap-4">
        <router-link
          class="relative block mv-img"
          to=""
          v-for="(item, index) in mv"
          :key="index"
        >
          <el-image class="h-fit rounded" :src="item.picUrl"></el-image>
          <span class="text-white text-xs absolute top-0 right-2 view-counts">
            <i class="el-icon-caret-right"> </i>
            {{ item.playCount }}
          </span>
          <div
            class="pop-down absolute top-0 bg-gray-700 bg-opacity-75 h-6 leading-6 w-full rounded-t align-middle text-white text-xs text-left px-3"
          >
            最新热门MV推荐
          </div>
          <p class="truncate text-sm text-left m-1">
            {{ item.name }}
          </p>
          <p class="truncate text-gray-500 text-xs text-left m-1">
            {{ item.artistName }}
          </p>
        </router-link>
      </el-main>
    </el-container>

    <!-- <el-container class="h-auto">
      <el-header height="30px">
        <router-link to="">
          <h3>看看</h3>
          <i class="el-icon-arrow-right"></i>
        </router-link>
      </el-header>
      <el-main class="grid grid-flow-col grid-cols-4 grid-rows-1 gap-4">
        <router-link
          class="relative block mv-img"
          to=""
          v-for="(item, index) in mv"
          :key="index"
        >
          <el-image class="h-fit rounded" :src="item.picUrl"></el-image>
          <span class="text-white text-xs absolute top-0 right-2 view-counts">
            <i class="el-icon-caret-right"> </i>
            {{ item.playCount }}
          </span>
          <div
            class="pop-down absolute top-0 bg-gray-700 bg-opacity-75 h-6 leading-6 w-full rounded-t align-middle text-white text-xs text-left px-3"
          >
            最新热门MV推荐
          </div>
          <p class="truncate text-sm text-left m-1">
            {{ item.name }}
          </p>
          <p class="truncate text-gray-500 text-xs text-left m-1">
            {{ item.artistName }}
          </p>
        </router-link>
      </el-main>
    </el-container>

    <el-container class="h-auto">
      <el-header height="30px">
        <router-link to="">
          <h3>独家放送</h3>
          <i class="el-icon-arrow-right"></i>
        </router-link>
      </el-header>
      <el-main class="grid grid-flow-col grid-cols-3 grid-rows-1 gap-4">
        <router-link
          class="relative block"
          to=""
          v-for="(item, index) in privatecontent"
          :key="index"
        >
          <el-image
            class="h-48 w-auto rounded-lg"
            :src="item.picUrl"
          ></el-image>
          <div class="transmit top-1 left-1" style="display: block">
            <i class="el-icon-caret-right"></i>
          </div>
          <p class="text-xs text-left">{{ item.name }}</p>
        </router-link>
      </el-main>
    </el-container>

    <el-container>
      <el-header height="30px">
        <router-link to="">
          <h3>推荐歌单</h3>
          <i class="el-icon-arrow-right"></i>
        </router-link>
      </el-header>
      <el-main class="grid grid-flow-col grid-cols-3 grid-rows-2 gap-4">
        <router-link
          class="relative block"
          to=""
          v-for="(item, index) in RecommendThePlaylist"
          :key="index"
        >
          <el-image
            class="RecommendThePlaylist rounded-lg"
            :src="item.picUrl"
          ></el-image>
          <span class="text-white text-xs absolute top-0 right-2">
            <i class="el-icon-caret-right"> </i>
            {{ parseInt(item.playCount / 10000) }}万
          </span>
          <div class="transmit bottom-11 right-3">
            <i class="el-icon-caret-right"></i>
          </div>
          <p class="text-xs text-left block w-5/6 translate-x-2/7">
            {{ item.name }}
          </p>
        </router-link>
      </el-main>
    </el-container> -->
  </div>
</template>



<script>
export default {
  name: "recommend",
  data() {
    return {
      banner: [],
      RecommendThePlaylist: [],
      privatecontent: [],
      newsong: [],
      artists: [],
      mv: [],
    };
  },
  methods: {
    getbanner() {
      this.axios({
        method: "get",
        url: "https://music.hzbiz.net/banner",
      })
        .then((result) => {
          this.banner = result.data.banners;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    getpersonalized() {
      this.axios({
        method: "get",
        url: "https://music.hzbiz.net/personalized",
        params: {
          limit: "10",
        },
      })
        .then((result) => {
          this.RecommendThePlaylist = result.data.result;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    getprivatecontent() {
      this.axios({
        method: "get",
        url: "https://music.hzbiz.net/personalized/privatecontent",
        params: {
          limit: "10",
        },
      })
        .then((result) => {
          this.privatecontent = result.data.result;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    getnewsong() {
      this.axios({
        method: "get",
        url: "https://music.hzbiz.net/personalized/newsong",
        params: {
          limit: "12",
        },
      })
        .then((result) => {
          this.newsong = result.data.result;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    getmv() {
      this.axios({
        method: "get",
        url: "https://music.hzbiz.net/personalized/mv",
      })
        .then((result) => {
          this.mv = result.data.result;
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
  created() {
    this.getbanner();
    this.getpersonalized();
    this.getprivatecontent();
    this.getnewsong();
    this.getmv();
  },
};
</script>

<style lang="scss" >
.recommend {
  height: 82.5vh;

  overflow: auto;
  .el-carousel-item {
    position: relative;
    // overflow: hidden;
  }
  .tally {
    background: #cc4a4a;
  }
  .el-container {
    padding: 0 15%;
  }
  .el-header {
    text-align: left;
    a {
      display: flex;
      align-items: center;
      h3 {
        font-size: 20px;
      }
      i {
        margin-left: 5px;
        font-weight: bold;
        font-size: 20px;
      }
    }
  }
  .el-main {
    a {
      .transmit {
        position: absolute;
        // bottom: 45px;
        // right: 15px;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        text-align: center;
        line-height: 30px;
        font-size: 25px;
        color: #ec4141;
        display: none;
        background: rgba($color: #fff, $alpha: 0.7);
      }
      &:hover .transmit {
        display: block;
      }
    }
    .RecommendThePlaylist {
      width: 208px;
    }
    .singer {
      color: #999;
    }
    .newsong:hover {
      background: #eaeaea;
    }
    .pop-down {
      transform: scaleY(0);
      transform-origin: 50% 0;
      transition: 0.3s;
    }
    .mv-img:hover .pop-down {
      transform: scaleY(1);
      // color: red;
    }
    .mv-img:hover .view-counts {
      display: none;
    }
  }
}

// 轮播图样式
</style>